<template id="footer">
    <div class="foot">
        <ul>
            <li @click="showSty(1)" v-bind:id="[activeStyle1]"><i class="icon iconfont icon-fangzi"></i><router-link  v-bind:id="[activeStyle1]" to="/head/recommend" >首页</router-link></li>
            <li @click="showSty(2)" v-bind:id="[activeStyle2]"><i class="icon iconfont icon-fenlei1"></i><router-link   v-bind:id="[activeStyle2]" to="/classification" >分类</router-link></li>
            <li @click="showSty(5)" v-bind:id="[activeStyle5]"><i  class="icon iconfont icon-crown"></i><router-link  v-bind:id="[activeStyle5]" to="/Member" >会员</router-link></li>
            <li @click="showSty(3)" v-bind:id="[activeStyle3]" id="foot_li"><time class="times">{{this.GLOBAL.goods_num}}</time><time class="te_time"></time><i class="icon iconfont icon-gouwuche" id="i_te"></i><router-link   v-bind:id="[activeStyle3]" to="/shop" >购物车</router-link></li>
            <li @click="showSty(4)" v-bind:id="[activeStyle4]"><i id="te" class="icon iconfont icon-rgzx"></i><router-link  v-bind:id="[activeStyle4]" to="/center" >个人中心</router-link></li>
        </ul>
    </div>
</template>
<script>
    export default{
        name: 'footer',
        data(){
            return{
                activeStyle1:'',
                activeStyle2:'',
                activeStyle3:'',
                activeStyle4:'',
                activeStyle5:'',
		goods_num1:'',
                goods_num:'',
            }
        },
        computed: {
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
        },
        mounted:function(){
            //初始化
            this.menus();
            this.GLOBAL.goods_nums(this);
          /*  this.goods_num = parseInt(this.GLOBAL.getCookie('goods_num'));*/
            $('.times').css({'visibility': 'hidden'})

        },
        methods:{
            menus:function(){
                var url = this.$route.fullPath;
                if(url == '/head/recommend'){
                    this.activeStyle1='showSty'
                }
                if(url == '/classification'){
                    this.activeStyle2='showSty'
                }
                if(url == '/Member'){
                    this.activeStyle5='showSty'
                }
                if(url == '/shop'){
                    this.activeStyle3='showSty'
                }
                if(url == '/center'){
                    this.activeStyle4='showSty'
                }
            },
            showSty:function(id){
                    this.activeStyle1='';
                    this.activeStyle2='';
                    this.activeStyle3='';
                    this.activeStyle4='';
                    this.activeStyle5='';
                    if(id == 1){this.activeStyle1 = 'showSty';window.location.href='/head/recommend';}
                    if(id == 2){this.activeStyle2 = 'showSty';window.location.href='/classification';}
                    if(id == 3){this.activeStyle3 = 'showSty';window.location.href='/shop';}
                    if(id == 4){this.activeStyle4 = 'showSty';window.location.href='/center';}
                    if(id == 5){this.activeStyle4 = 'showSty';window.location.href='/Member';}

            }
        }
    };

</script>
<style>
    #foot_li{
        position:relative;
    }
    #foot_li time:nth-of-type(1){
        position:absolute;
        font-size:0.18rem;
        background:red;
        color:#ffffff;
        width:0.3rem;
        height:0.3rem;
        display:block;
        border-radius:50%;
        text-align:center;
        line-height:0.3rem;
        left:0.8rem;
        top:0;
    }
    #foot_li time:nth-of-type(2){
        position:absolute;
        display:block;
        border-radius:50%;
        left:0.8rem;
        top:0;
        width:0.3rem;
        height:0.3rem;
        opacity:0;
    }
    /*购物车*/
    #showSty{
        color:#1ba8fe;
    }
    .foot{
        height:0.9rem;
        width:100%;
        position: fixed;
        bottom: 0;
        left:0;
        background: #fff;
        border-top:1px solid #eee;
    }
    #te{
        left:0.3rem;
    }
    .foot ul{
        height:0.9rem;
        display:flex;
    }
    .foot ul li{
        flex:1;
        list-style:none;
        flex-direction: column;
        display:flex;
    }
    .foot ul li i{
        flex:1;
        font-size:0.35rem;
        text-align:center;
        line-height:0.6rem;
    }
    .foot ul li a{
        font-size:0.2rem;
        color:#666;
        text-decoration:none;

        height:0.8rem;
        line-height:0.2rem;
        text-align:center;
        flex:1;
    }
</style>
